<template>
  <!-- 底部导航条 -->
        <nav class="navBar flex-r-b">
            <router-link class="navItem" to="/home" exact>
                <div class="icon icon-home">
                    <img v-if="path === '/home'" src="../../public/images/index/iocn_4s.png" alt="">
                    <img v-else src="../../public/images/index/iocn_4.png" alt="" >
                </div>
                <div class="text">首页</div>
            </router-link>
            <router-link class="navItem" to="/goods" exact>
                <div class="icon icon-all">
                    <img src="../../public/images/index/iocn_5.png" alt="">
                </div>
                <div class="text">所有产品</div>
            </router-link>
            <router-link class="navItem" to="/cart" exact>
                <div class="icon icon-cart">
                    <img v-if='path === "/cart"' src="../../public/images/index/iocn_6s.png" alt="">
                    <img v-else src="../../public/images/index/iocn_6.png" alt="" >                    
                </div>
                <div class="text">购物车</div>
            </router-link>
            <router-link class="navItem" to="/orders">
                <div class="icon icon-member">
                    <img src="../../public/images/index/iocn_7.png" alt="">
                </div>
                <div class="text">会员中心</div>
            </router-link>
            <router-link class="navItem" to="/about">
                <div class="icon icon-customer">
                    <img src="../../public/images/index/iocn_8.png" alt="">
                </div>
                <div class="text">客服</div>
            </router-link>
        </nav>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      path:'home',
      SRC:'../../public/images/icon'
    };
  },
  created() {
    console.log(this.$route.path)
    this.path = this.$route.path
  },
  mounted() {},
  computed: {},
  methods: {},
  watch: {}
};
</script>
<style lang="scss" scoped>
@import "../../public/sass/base.scss";
// 底部导航
.navBar {
  @include top-border-1px($c-ef);
  position: fixed;
  padding-top: 0.1rem;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 0.98rem;
  background: $c-ff;
  .navItem {
    display: block;
    flex: 1;
    text-align: center;
    .icon {
      margin: 0 auto;
    }
    .icon-home {
      width: 0.28rem;
      height: 0.34rem;
    }
    .icon-all,
    .icon-customer {
      width: 0.34rem;
      height: 0.34rem;
    }
    .icon-cart {
      width: 0.4rem;
      height: 0.34rem;
    }
    .icon-member {
      width: 0.37rem;
      height: 0.3rem;
    }
    .text {
      font-family: "PingFang SC Bold";
      color: $c-33;
      font-size: 0.22rem;
      padding-top: 0.1rem;
    }
  } //当前导航
  .active {
    .text {
      color: $c-ffba17;
    }
  }
}
</style>